<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/12
  Time: 14:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <title>Title</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="assets/css/base.css">
    <style>




        .header{
            height: 60px;
        }
        .header h2{
            color: white;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div class="fx-col page">
    <div class="header noshrink fx valign-center" style="background: #393D49">
        <h2 class="noshrink">学生成绩管理系统</h2>

        <ul class="layui-nav" lay-filter="" id="level1_menu">
            <li class="layui-nav-item layui-this"><a href="" data-key="base_manage">基础数据管理</a></li>
            <li class="layui-nav-item"><a href="javascript:void" data-key="score_manage">成绩管理</a></li>
            <li class="layui-nav-item"><a href="javascript:void" data-key="score_statistics">成绩统计</a></li>
        </ul>

    </div>

    <div class="main fx-g1 fx">
        <div class="left_panel noshrink" style="width:200px ;background: #2E2D3C">
            <ul class="layui-nav layui-nav-tree" lay-filter="test" id="level2_menu">
                <li class="layui-nav-item"><a href="">产品</a></li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
            </ul>
        </div>
        <div class="right_panel fx-g1 fx" style="padding: 15px;background: #4E5465">
            <iframe id="main_page" name="main_page" src="" frameborder="0" class="fx-g1">

            </iframe>

        </div>

    </div>

</div>
  
  </body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/layui/layui.all.js"></script>
<script>


    var data ={
        menus:{
            "base_manage": [
                {name:'年级管理',url:"grade/index"},
                {name:'班级管理',url:"clazz/index"},
                {name:'学科管理',url:"subject/index"},
                {name:'老师管理',url:"teacher/index"},
                {name:'学生管理',url:'student/index'}
            ],
            "score_manage":[
                {name:'考试管理',url:"exam/index"},
                {name:'成绩查询',url:"/pages/exam/list.html"},
            ],
            "score_statistics":[
                {name:'年级统计',url:"/pages/statistics/grade.html"},
                {name:'班级统计',url:"/pages/statistics/class.html"}
            ]
        }
    }

    $(function (){
        $(document).on("click","#level1_menu a",function (e) {
            e.preventDefault();
            let key = $(this).data("key");
            let subMenus = data.menus[key];

            let content="";
            subMenus.forEach((item, i)=> {
                content +=`<li class="layui-nav-item"><a href="javascript:void" data-url="`+item.url+`" target="main_page">`+item.name+`</li>`;
            })
            $("#level2_menu").html(content);
            $("#level2_menu .layui-nav-item:eq(0) a").click();
        }).on("click","#level2_menu a",function (){
            $("#level2_menu .layui-nav-item.layui-this").removeClass("layui-this");
            $(this).parent().addClass("layui-this");
            let url = $(this).data("url");
            $("#main_page").attr("src",url);
        })


        $("#level1_menu .layui-nav-item.layui-this a").click();
    })



</script>






</html>
